<template>
    <el-menu :collapse-transition="false" :collapse="isCollapse" :router="true" active-text-color="#95d475" background-color="rgb(48,65,86)" class="el-menu-vertical-demo nav" :default-active="$route.path" text-color="#fff">
      <el-menu-item index="/" class="title" style="padding: 8px;">
        <img src="../assets/img/logo.svg">
        <h3 style="color: white;">{{isCollapse ? '': '门店云管理平台'}}</h3>
      </el-menu-item>
      <el-menu-item  @click="MenuRouter(menu)" v-for="menu in menuLevel1" :index="menu.path" :key="menu.path">
        <el-icon>
          <component :is="menu.icon"></component>
        </el-icon>
        <span>{{menu.label}}</span>
      </el-menu-item>
      <el-sub-menu v-for="menu in menuLevel2" :key="menu.path" :index="menu.path">
        <template #title>
          <el-icon>
            <component :is="menu.icon"></component>
          </el-icon>
          <span>{{menu.label}}</span>
        </template> 
        <el-menu-item  @click="MenuRouter(subMenu)" v-for="subMenu in menu.children" :key="subMenu.path" :index="subMenu.path">
          <el-icon>
            <component :is="subMenu.icon"></component>
          </el-icon>
          <span>{{subMenu.label}}</span>
        </el-menu-item>
      </el-sub-menu>
      <el-menu-item  @click="MenuRouter(menu)" v-for="menu in menuEnd" :index="menu.path" :key="menu.path">
        <el-icon>
          <component :is="menu.icon"></component>
        </el-icon>
        <span>{{menu.label}}</span>
      </el-menu-item>
    </el-menu>
</template>

<script>
import {ref,computed} from 'vue';
import request from '@/utils/request'
import {useStore} from 'vuex'
export default{
  name:'SideMenu',
  components:{
  },
  setup() {
    let store = useStore();
    let isCollapse = computed(()=> store.state.menu.isCollapse)
    let menuLevel1 = ref([])
    let menuLevel2 = ref([])
    let menuEnd = ref([])
    let role = store.state.user.role;
    let roleId = 1;
    if(role === 'ROLE_USER')
        roleId = 3;
    else if (role === 'ROLE_BOSS')
        roleId = 2
    // 根据权限获取菜单
    const getMenu = roleId => {
        request({
            url:'/menu/',
            method:'get',
            params:{roleId},
            headers:{
              Authorization:"Bearer "+store.state.user.token,
            }
        }).then((result) => {
          store.commit('GetMenu',result)
          menuLevel1.value = result.filter((item) => {
              if(item.children.length === 0 && item.id < 8)
                return item
          });
          menuEnd.value = result.filter((item) => {
              if(item.children.length === 0 && item.id >= 8)
                return item
          });
          menuLevel2.value = result.filter((item) => {
              if(item.children.length > 0)
                return item
          });
        }).catch((err) => {
          console.log(err)
        });
    }
    getMenu(roleId);
    let MenuRouter = function(menu){
      store.commit('ADDTab',menu)
    }
    return {
      isCollapse,
      menuLevel1,
      menuLevel2,
      MenuRouter,
      menuEnd
    }
  },
}
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.nav{
  height: 100vh;
  border: 0;
}
.title{
  height: 60px;
  background-color:#a2a4a8;
}
</style>